<template>
  <view class="container">
    <view class="example">
      <!-- 添加头像显示和修改功能 -->
      <view class="avatar-container">
        <view class="avatar-wrapper">
          <image v-if="user.avatar" class="avatar" :src="user.avatar" mode="aspectFill"></image>
          <image v-else class="avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132" mode="aspectFill"></image>
          <view class="avatar-mask" @click="updateAvatar">
            <text class="avatar-text">修改头像</text>
          </view>
        </view>
      </view>
      
      <uni-forms ref="form" :model="user" labelWidth="80px">
        <uni-forms-item label="用户昵称" name="nickName" required>
          <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="phonenumber" required>
          <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email" required>
          <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" required>
          <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"
  import { updateUserProfile } from "@/api/system/user"
  import store from '@/store'

  export default {
    data() {
      return {
        user: {
          nickName: "",
          phonenumber: "",
          email: "",
          sex: "",
          avatar: "" // 添加头像字段
        },
        sexs: [{
          text: '男',
          value: "0"
        }, {
          text: '女',
          value: "1"
        }],
        rules: {
          nickName: {
            rules: [{
              required: true,
              errorMessage: '用户昵称不能为空'
            }]
          },
          phonenumber: {
            rules: [{
              required: true,
              errorMessage: '手机号码不能为空'
            }, {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码'
            }]
          },
          email: {
            rules: [{
              required: true,
              errorMessage: '邮箱地址不能为空'
            }, {
              format: 'email',
              errorMessage: '请输入正确的邮箱地址'
            }]
          }
        }
      }
    },
    onLoad() {
      this.getUser()
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    // 添加页面显示时的钩子，用于在修改头像后更新显示
    onShow() {
      // 如果store中的头像与当前用户头像不一致，则更新
      if (store.getters.avatar && store.getters.avatar !== this.user.avatar) {
        this.user.avatar = store.getters.avatar
      }
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user.nickName = response.data.nickName
          this.user.phonenumber = response.data.phonenumber
          this.user.email = response.data.email
          this.user.sex = response.data.sex
          console.log('user', this.user);
          // 确保头像字段被正确设置
          if (!this.user.avatar && store.getters.avatar) {
            this.user.avatar = store.getters.avatar
          }
        })
      },
      submit(ref) {
        this.$refs.form.validate().then(res => {
          updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功")
          })
        })
      },
      // 添加修改头像方法
      updateAvatar() {
        // 跳转到头像裁剪页面
        uni.navigateTo({
          url: '/pages/mine/avatar/index'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
  
  /* 添加头像相关样式 */
  .avatar-container {
    display: flex;
    justify-content: center;
    margin: 30rpx 0;
  }
  
  .avatar-wrapper {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .avatar {
    width: 100%;
    height: 100%;
  }
  
  .avatar-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    font-size: 24rpx;
    padding: 10rpx 0;
  }
  
  .avatar-text {
    color: #fff;
  }
</style>
